<template>
  <div class="Word">
    <div class="content" :style="{backgroundColor:Styles.backgroundColor,border:'1px solid '+Styles.borderColor}">
      <div class="heads" @click.stop="hide('hide')" :style="{borderColor:Styles.borderColor}">
        <i class="iconfont icon-shouqi"></i>
      </div>
      <div class="ctens">
        <div class="text">
          <div>
            <span :style="{color:Styles.color}">{{items.Word}}</span>
            <span
              :style="{color:Styles.color }">/{{items.usa_phonetic_transcription}}/({{items.word_zh_view.pron}})</span>
          </div>
          <div :style="{color:Styles.color }">
            {{items.word_zh_view.zh.join('')}}
          </div>
        </div>
        <!--<div class="icon">-->
        <!--<i class="iconfont icon-yinpin" v-if="icon" @click="ispaly"-->
        <!--:class="{'active':ispay&&Styles.mode===1,'actives':ispay&&Styles.mode===2}"></i>-->
        <!---->
        <!--</div>-->
        <div class="icon" @click="ispaly" :class="{'active':ispay&&Styles.mode===1,'actives':ispay&&Styles.mode===2}">
          <!--<i class="iconfont icon-yinpin" v-if="icon"-->
          <!--:class="{'active':ispay&&Styles.mode===1,'actives':ispay&&Styles.mode===2}"></i>-->
          <icons :icons="ispay" :styles="IconStyle"></icons>
        </div>
      </div>
    </div>
    <audio ref="audio" :src="item.usa_voice_url" preload="auto" @timeupdate="state" v-if="item.usa_voice_url !== '-1'"></audio>
  </div>
</template>

<script>
  import icons from '../icons/index'

  export default {
    name: "index",
    data: function () {
      return {
        audio: null,
        ispay: false,
        IconStyle: {
          "margin-left": '0rem'
        },
      }
    },
    props: ['Styles', 'item', 'icon'],
    components: {icons},
    computed: {
      items: {
        get: function () {
          this.item.word_zh_view = JSON.parse(this.item.word_zh_view)[0]
          return this.item
        }
      }
    },
    mounted: function () {
      this.audio = this.$refs.audio
    },
    methods: {
      state: function (e) {
        let audio = e.target
        if (!audio.paused) {
          this.ispay = true
        } else {
          this.ispay = false
        }
      },
      ispaly: function () {
        if (!this.audio.paused) {
          this.ispay = false
          this.audio.pause()
        } else {
          this.ispay = true
          this.audio.load()
          this.audio.play()
        }
      },
      hide: function (str) {
        this.$emit(str)
      }
    }
  }
</script>

<style scoped>
  @import "./css/index.css";
</style>
